<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>布局配置 | vue-next-admin</title>
    <meta name="description" content="🎉🎉🔥基于vue3.x 、Typescript、vite、Element plus等，适配手机、平板、pc 的后台开源免费模板库（vue2.x请切换vue-prev-admin分支）开发文档">
    <link rel="stylesheet" href="/vue-next-admin-doc-preview/assets/style.5cebb62a.css">
    <link rel="modulepreload" href="/vue-next-admin-doc-preview/assets/Home.d1c70b92.js">
    <link rel="modulepreload" href="/vue-next-admin-doc-preview/assets/AlgoliaSearchBox.56b5b4ad.js">
    <link rel="modulepreload" href="/vue-next-admin-doc-preview/assets/app.9cc95a61.js">
    <link rel="modulepreload" href="/vue-next-admin-doc-preview/assets/config_layoutConfig_index.md.713fd6e3.lean.js">
    
    <link rel="icon" href="/vue-next-admin-doc-preview/images/favicon.ico">
  <meta name="keywords" content="doc、vue-next-admin、vue-next-admin-doc、vue3、element-plus、vuejs/vue-next">
  <meta name="description" content="🎉🎉🔥基于vue3.x 、Typescript、vite、Element plus等，适配手机、平板、pc 的后台开源免费模板库（vue2.x请切换vue-prev-admin分支）开发文档">
  <script>var _hmt=_hmt||[];(function(){var e=document.createElement("script");e.src="https://hm.baidu.com/hm.js?dd9ada7b25f65a181a42780f04b764e6";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)})();</script>
  <meta name="twitter:title" content="布局配置 | vue-next-admin">
  <meta property="og:title" content="布局配置 | vue-next-admin">
  </head>
  <body>
    <div id="app"><!--[--><div class="theme"><header class="nav-bar" data-v-fcf5c4a8><div class="sidebar-button" data-v-fcf5c4a8><svg class="icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z" class></path></svg></div><a class="nav-bar-title" href="/vue-next-admin-doc-preview/" aria-label="vue-next-admin, back to home" data-v-fcf5c4a8 data-v-4424da2c><img class="logo" src="/vue-next-admin-doc-preview/images/logo-mini.svg" alt="Logo" data-v-4424da2c> vue-next-admin</a><div class="flex-grow" data-v-fcf5c4a8></div><div class="nav" data-v-fcf5c4a8><nav class="nav-links" data-v-fcf5c4a8 data-v-107a016c><!--[--><div class="item" data-v-107a016c><div class="nav-link" data-v-107a016c data-v-e720f45e><a class="item" href="/vue-next-admin-doc-preview/home/" data-v-e720f45e>指南 <!----></a></div></div><div class="item" data-v-107a016c><div class="nav-link" data-v-107a016c data-v-e720f45e><a class="item active" href="/vue-next-admin-doc-preview/config/" data-v-e720f45e>配置参考 <!----></a></div></div><div class="item" data-v-107a016c><div class="nav-dropdown-link" data-v-107a016c data-v-719eac16><button class="button" data-v-719eac16><span class="button-text" data-v-719eac16>集成后端</span><span class="right button-arrow" data-v-719eac16></span></button><ul class="dialog" data-v-719eac16><!--[--><li class="dialog-item" data-v-719eac16><div class="nav-dropdown-link-item" data-v-719eac16 data-v-43c736e2><a class="item isExternal" href="https://github.com/PandaGoAdmin/PandaX" target="_blank" rel="noopener noreferrer" data-v-43c736e2><span class="arrow" data-v-43c736e2></span><span class="text" data-v-43c736e2>@熊猫 PandaGoAdmin</span><span class="icon" data-v-43c736e2><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-43c736e2><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-719eac16><div class="nav-dropdown-link-item" data-v-719eac16 data-v-43c736e2><a class="item isExternal" href="https://www.gnet.top/public" target="_blank" rel="noopener noreferrer" data-v-43c736e2><span class="arrow" data-v-43c736e2></span><span class="text" data-v-43c736e2>@甜蜜蜜 GoPro平台</span><span class="icon" data-v-43c736e2><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-43c736e2><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><!--]--></ul></div></div><div class="item" data-v-107a016c><div class="nav-dropdown-link" data-v-107a016c data-v-719eac16><button class="button" data-v-719eac16><span class="button-text" data-v-719eac16>线上演示</span><span class="right button-arrow" data-v-719eac16></span></button><ul class="dialog" data-v-719eac16><!--[--><li class="dialog-item" data-v-719eac16><div class="nav-dropdown-link-item" data-v-719eac16 data-v-43c736e2><a class="item isExternal" href="https://lyt-top.gitee.io/vue-next-admin-preview/#/login" target="_blank" rel="noopener noreferrer" data-v-43c736e2><span class="arrow" data-v-43c736e2></span><span class="text" data-v-43c736e2>vue3.x 版本预览（vue-next-admin）</span><span class="icon" data-v-43c736e2><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-43c736e2><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-719eac16><div class="nav-dropdown-link-item" data-v-719eac16 data-v-43c736e2><a class="item isExternal" href="https://lyt-top.gitee.io/vue-prev-admin-preview/#/login" target="_blank" rel="noopener noreferrer" data-v-43c736e2><span class="arrow" data-v-43c736e2></span><span class="text" data-v-43c736e2>vue2.x 版本预览（vue-prev-admin）</span><span class="icon" data-v-43c736e2><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-43c736e2><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><!--]--></ul></div></div><div class="item" data-v-107a016c><div class="nav-link" data-v-107a016c data-v-e720f45e><a class="item isExternal" href="https://gitee.com/lyt-top/vue-next-admin/blob/master/CHANGELOG.md" target="_blank" rel="noopener noreferrer" data-v-e720f45e>更新日志 <svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-e720f45e><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div></div><div class="item" data-v-107a016c><div class="nav-dropdown-link" data-v-107a016c data-v-719eac16><button class="button" data-v-719eac16><span class="button-text" data-v-719eac16>代码仓库</span><span class="right button-arrow" data-v-719eac16></span></button><ul class="dialog" data-v-719eac16><!--[--><li class="dialog-item" data-v-719eac16><div class="nav-dropdown-link-item" data-v-719eac16 data-v-43c736e2><a class="item isExternal" href="https://gitee.com/lyt-top/vue-next-admin" target="_blank" rel="noopener noreferrer" data-v-43c736e2><span class="arrow" data-v-43c736e2></span><span class="text" data-v-43c736e2>gitee（国内：实时更新）</span><span class="icon" data-v-43c736e2><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-43c736e2><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-719eac16><div class="nav-dropdown-link-item" data-v-719eac16 data-v-43c736e2><a class="item isExternal" href="https://github.com/lyt-Top/vue-next-admin" target="_blank" rel="noopener noreferrer" data-v-43c736e2><span class="arrow" data-v-43c736e2></span><span class="text" data-v-43c736e2>github（国外：定期更新）</span><span class="icon" data-v-43c736e2><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-43c736e2><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><!--]--></ul></div></div><!--]--><!----><div class="item" data-v-107a016c><div class="nav-link" data-v-107a016c data-v-e720f45e><a class="item isExternal" href="https://gitee.com/lyt-top/vue-next-admin-doc" target="_blank" rel="noopener noreferrer" data-v-e720f45e>文档仓库 <svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-e720f45e><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div></div></nav></div><!--[--><!--[--><div class="algolia-search-box" id="docsearch"></div><!--]--><!--]--></header><aside class="sidebar" data-v-34c05c3a><nav class="nav-links nav" data-v-34c05c3a data-v-107a016c><!--[--><div class="item" data-v-107a016c><div class="nav-link" data-v-107a016c data-v-e720f45e><a class="item" href="/vue-next-admin-doc-preview/home/" data-v-e720f45e>指南 <!----></a></div></div><div class="item" data-v-107a016c><div class="nav-link" data-v-107a016c data-v-e720f45e><a class="item active" href="/vue-next-admin-doc-preview/config/" data-v-e720f45e>配置参考 <!----></a></div></div><div class="item" data-v-107a016c><div class="nav-dropdown-link" data-v-107a016c data-v-719eac16><button class="button" data-v-719eac16><span class="button-text" data-v-719eac16>集成后端</span><span class="right button-arrow" data-v-719eac16></span></button><ul class="dialog" data-v-719eac16><!--[--><li class="dialog-item" data-v-719eac16><div class="nav-dropdown-link-item" data-v-719eac16 data-v-43c736e2><a class="item isExternal" href="https://github.com/PandaGoAdmin/PandaX" target="_blank" rel="noopener noreferrer" data-v-43c736e2><span class="arrow" data-v-43c736e2></span><span class="text" data-v-43c736e2>@熊猫 PandaGoAdmin</span><span class="icon" data-v-43c736e2><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-43c736e2><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-719eac16><div class="nav-dropdown-link-item" data-v-719eac16 data-v-43c736e2><a class="item isExternal" href="https://www.gnet.top/public" target="_blank" rel="noopener noreferrer" data-v-43c736e2><span class="arrow" data-v-43c736e2></span><span class="text" data-v-43c736e2>@甜蜜蜜 GoPro平台</span><span class="icon" data-v-43c736e2><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-43c736e2><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><!--]--></ul></div></div><div class="item" data-v-107a016c><div class="nav-dropdown-link" data-v-107a016c data-v-719eac16><button class="button" data-v-719eac16><span class="button-text" data-v-719eac16>线上演示</span><span class="right button-arrow" data-v-719eac16></span></button><ul class="dialog" data-v-719eac16><!--[--><li class="dialog-item" data-v-719eac16><div class="nav-dropdown-link-item" data-v-719eac16 data-v-43c736e2><a class="item isExternal" href="https://lyt-top.gitee.io/vue-next-admin-preview/#/login" target="_blank" rel="noopener noreferrer" data-v-43c736e2><span class="arrow" data-v-43c736e2></span><span class="text" data-v-43c736e2>vue3.x 版本预览（vue-next-admin）</span><span class="icon" data-v-43c736e2><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-43c736e2><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-719eac16><div class="nav-dropdown-link-item" data-v-719eac16 data-v-43c736e2><a class="item isExternal" href="https://lyt-top.gitee.io/vue-prev-admin-preview/#/login" target="_blank" rel="noopener noreferrer" data-v-43c736e2><span class="arrow" data-v-43c736e2></span><span class="text" data-v-43c736e2>vue2.x 版本预览（vue-prev-admin）</span><span class="icon" data-v-43c736e2><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-43c736e2><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><!--]--></ul></div></div><div class="item" data-v-107a016c><div class="nav-link" data-v-107a016c data-v-e720f45e><a class="item isExternal" href="https://gitee.com/lyt-top/vue-next-admin/blob/master/CHANGELOG.md" target="_blank" rel="noopener noreferrer" data-v-e720f45e>更新日志 <svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-e720f45e><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div></div><div class="item" data-v-107a016c><div class="nav-dropdown-link" data-v-107a016c data-v-719eac16><button class="button" data-v-719eac16><span class="button-text" data-v-719eac16>代码仓库</span><span class="right button-arrow" data-v-719eac16></span></button><ul class="dialog" data-v-719eac16><!--[--><li class="dialog-item" data-v-719eac16><div class="nav-dropdown-link-item" data-v-719eac16 data-v-43c736e2><a class="item isExternal" href="https://gitee.com/lyt-top/vue-next-admin" target="_blank" rel="noopener noreferrer" data-v-43c736e2><span class="arrow" data-v-43c736e2></span><span class="text" data-v-43c736e2>gitee（国内：实时更新）</span><span class="icon" data-v-43c736e2><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-43c736e2><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-719eac16><div class="nav-dropdown-link-item" data-v-719eac16 data-v-43c736e2><a class="item isExternal" href="https://github.com/lyt-Top/vue-next-admin" target="_blank" rel="noopener noreferrer" data-v-43c736e2><span class="arrow" data-v-43c736e2></span><span class="text" data-v-43c736e2>github（国外：定期更新）</span><span class="icon" data-v-43c736e2><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-43c736e2><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><!--]--></ul></div></div><!--]--><!----><div class="item" data-v-107a016c><div class="nav-link" data-v-107a016c data-v-e720f45e><a class="item isExternal" href="https://gitee.com/lyt-top/vue-next-admin-doc" target="_blank" rel="noopener noreferrer" data-v-e720f45e>文档仓库 <svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-e720f45e><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div></div></nav><!--[--><!--]--><ul class="sidebar-links" data-v-34c05c3a><!--[--><li class="sidebar-link"><p class="sidebar-link-item">基础</p><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="/vue-next-admin-doc-preview/config/">简介</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/vue-next-admin-doc-preview/config/menu/">菜单配置</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item active" href="/vue-next-admin-doc-preview/config/layoutConfig/">布局配置</a><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="#全局主题">全局主题</a><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="#目录结构">目录结构</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#scss-部分函数说明">scss 部分函数说明</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#自定义全局主题">自定义全局主题</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#框架中实现例子">框架中实现例子</a><!----></li></ul></li><li class="sidebar-link"><a class="sidebar-link-item" href="#菜单-顶栏">菜单 / 顶栏</a><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="#顶栏">顶栏</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#菜单">菜单</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#分栏">分栏</a><!----></li></ul></li><li class="sidebar-link"><a class="sidebar-link-item" href="#界面设置">界面设置</a><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="#菜单设置">菜单设置</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#固定-header">固定 Header</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#锁屏">锁屏</a><!----></li></ul></li><li class="sidebar-link"><a class="sidebar-link-item" href="#界面显示">界面显示</a><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="#侧边栏-logo">侧边栏 Logo</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#breadcrumb-面包屑">Breadcrumb 面包屑</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#tagsview-标签页">Tagsview 标签页</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#footer-版权">Footer 版权</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#颜色模式">颜色模式</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#水印">水印</a><!----></li></ul></li><li class="sidebar-link"><a class="sidebar-link-item" href="#其它设置">其它设置</a><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="#tagsview-风格">Tagsview 风格</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#主页面切换动画">主页面切换动画</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#分栏高亮风格">分栏高亮风格</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#分栏布局风格">分栏布局风格</a><!----></li></ul></li><li class="sidebar-link"><a class="sidebar-link-item" href="#布局切换">布局切换</a><!----></li></ul></li><li class="sidebar-link"><a class="sidebar-link-item" href="/vue-next-admin-doc-preview/config/iconfont/">字体图标</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/vue-next-admin-doc-preview/config/server/">服务端交互</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/vue-next-admin-doc-preview/config/vuex/">vuex</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/vue-next-admin-doc-preview/config/build/">打包预览</a><!----></li></ul></li><li class="sidebar-link"><p class="sidebar-link-item">高级</p><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="/vue-next-admin-doc-preview/config/power/">权限管理</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/vue-next-admin-doc-preview/config/route/">路由参数</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/vue-next-admin-doc-preview/config/i18n/">国际化</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/vue-next-admin-doc-preview/config/tagsView/">标签页</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/vue-next-admin-doc-preview/config/directive/">内置指令</a><!----></li></ul></li><li class="sidebar-link"><p class="sidebar-link-item">其它</p><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="/vue-next-admin-doc-preview/config/charts/">数据可视化</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/vue-next-admin-doc-preview/config/tool/">工具类集合</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/vue-next-admin-doc-preview/config/partyPlug/">第三方插件使用</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/vue-next-admin-doc-preview/config/builtPlug/">内置插件的使用</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/vue-next-admin-doc-preview/config/otherIssues/">其它问题</a><!----></li></ul></li><li class="sidebar-link"><p class="sidebar-link-item">赞助</p><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="/vue-next-admin-doc-preview/config/support/">支持开源</a><!----></li></ul></li><!--]--></ul><!--[--><!--]--></aside><div class="sidebar-mask"></div><main class="page" data-v-1c2e469b><div class="container" data-v-1c2e469b><!--[--><!--]--><div style="position:relative;" class="content" data-v-1c2e469b><div><h1 id="布局配置" tabindex="-1">布局配置 <a class="header-anchor" href="#布局配置" aria-hidden="true">#</a></h1><div class="tip custom-block"><p class="custom-block-title">布局不生效</p><p>清空浏览器永久缓存或者点击 <code>布局配置-一键恢复默认</code>，前提是修改了 <code>/@/store/modules/themeConfig.ts</code> 配置文件内容。布局配置组件路径：<code>/@/layout/navBars/breadcrumb/setings.vue</code>。添加或者修改功能，请前往 <code>/@/layout/navBars/breadcrumb/setings.vue</code> 组件位置修改</p></div><blockquote><p>大图查看，鼠标右键：<code>在新标签页中打开图片</code></p></blockquote><img src="https://img-blog.csdnimg.cn/b7738eba9c534cffb9e6b648552fa591.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAbHl0LXRvcA==,size_20,color_FFFFFF,t_70,g_se,x_16"><h2 id="全局主题" tabindex="-1">全局主题 <a class="header-anchor" href="#全局主题" aria-hidden="true">#</a></h2><h3 id="目录结构" tabindex="-1">目录结构 <a class="header-anchor" href="#目录结构" aria-hidden="true">#</a></h3><p style="font-weight:bold;">一、`src/theme` 下，后期继续补充，样式都会写在这个文件夹下：</p><blockquote><p><a href="https://gitee.com/lyt-top/vue-next-admin/tree/vue-prev-admin/" target="_blank" rel="noopener noreferrer">vue-prev-admin</a> vue2.x 的目录结构也会基于该结构进行修改</p></blockquote><div class="language-ts"><pre><code>├── <span class="token function">theme</span> <span class="token punctuation">(</span>页面样式<span class="token punctuation">)</span>
	├── <span class="token function">common</span> <span class="token punctuation">(</span>基础样式<span class="token punctuation">)</span>
	│	├── transition<span class="token punctuation">.</span><span class="token function">scss</span> <span class="token punctuation">(</span>页面过渡动画<span class="token punctuation">)</span>
	│	└── <span class="token keyword">var</span><span class="token punctuation">.</span><span class="token function">scss</span> <span class="token punctuation">(</span>全局主题样式，用于全局改变样式<span class="token punctuation">)</span>
	│
	├── <span class="token function">media</span> <span class="token punctuation">(</span>媒体查询<span class="token punctuation">)</span>
	│	├── chart<span class="token punctuation">.</span><span class="token function">scss</span> <span class="token punctuation">(</span>大数据图表<span class="token punctuation">)</span>
	│	├── cityLinkage<span class="token punctuation">.</span><span class="token function">scss</span> <span class="token punctuation">(</span>Cascader 级联选择器城市选择<span class="token punctuation">)</span>
	│	├── dialog<span class="token punctuation">.</span><span class="token function">scss</span> <span class="token punctuation">(</span>弹窗<span class="token punctuation">)</span>
	│	├── error<span class="token punctuation">.</span><span class="token function">scss</span> <span class="token punctuation">(</span><span class="token number">404</span>、<span class="token number">401</span>界面<span class="token punctuation">)</span>
	│	├── form<span class="token punctuation">.</span><span class="token function">scss</span> <span class="token punctuation">(</span>表单<span class="token punctuation">)</span>
	│	├── home<span class="token punctuation">.</span><span class="token function">scss</span> <span class="token punctuation">(</span>首页<span class="token punctuation">)</span>
	│	├── index<span class="token punctuation">.</span><span class="token function">scss</span> <span class="token punctuation">(</span>媒体查询定义主样式<span class="token punctuation">)</span>
	│	├── layout<span class="token punctuation">.</span><span class="token function">scss</span> <span class="token punctuation">(</span>框架布局<span class="token punctuation">)</span>
	│	├── login<span class="token punctuation">.</span><span class="token function">scss</span> <span class="token punctuation">(</span>登录界面<span class="token punctuation">)</span>
	│	├── media<span class="token punctuation">.</span><span class="token function">scss</span> <span class="token punctuation">(</span>媒体查询主出口<span class="token punctuation">)</span>
	│	├── pagination<span class="token punctuation">.</span><span class="token function">scss</span> <span class="token punctuation">(</span>分页<span class="token punctuation">)</span>
	│	├── personal<span class="token punctuation">.</span><span class="token function">scss</span> <span class="token punctuation">(</span>个人中心<span class="token punctuation">)</span>
	│	├── scrollbar<span class="token punctuation">.</span><span class="token function">scss</span> <span class="token punctuation">(</span>页面滚动条<span class="token punctuation">)</span>
	│	└── tagsView<span class="token punctuation">.</span><span class="token function">scss</span> <span class="token punctuation">(</span>tagsView 标签页<span class="token punctuation">)</span>
	│
	├── <span class="token function">mixins</span> <span class="token punctuation">(</span>scss混入<span class="token punctuation">)</span>
	│	├── element<span class="token operator">-</span>mixins<span class="token punctuation">.</span><span class="token function">scss</span> <span class="token punctuation">(</span>定义重置的element plus混入复用样式<span class="token punctuation">)</span>
	│	├── <span class="token keyword">function</span><span class="token punctuation">.</span><span class="token function">scs</span> <span class="token punctuation">(</span>全局主题颜色调用混入函数<span class="token punctuation">)</span>
	│	└── mixins<span class="token punctuation">.</span><span class="token function">scss</span> <span class="token punctuation">(</span>定义一些常用的全局混入样式<span class="token punctuation">)</span>
	│
	├── app<span class="token punctuation">.</span><span class="token function">scss</span> <span class="token punctuation">(</span>页面主样式，用于重置浏览器默认样式<span class="token punctuation">)</span>
	├── base<span class="token punctuation">.</span><span class="token function">scss</span> <span class="token punctuation">(</span>基础样式、过渡动画引入等<span class="token punctuation">)</span>
	├── dark<span class="token punctuation">.</span><span class="token function">scss</span> <span class="token punctuation">(</span>深色主题<span class="token punctuation">)</span>
	├── element<span class="token punctuation">.</span><span class="token function">scss</span> <span class="token punctuation">(</span>重置的element plus样式，用于改变主题<span class="token punctuation">)</span>
	├── iconSelector<span class="token punctuation">.</span><span class="token function">scss</span> <span class="token punctuation">(</span>图标选择器<span class="token punctuation">)</span>
	├── index<span class="token punctuation">.</span><span class="token function">scss</span> <span class="token punctuation">(</span>页面样式主出口<span class="token punctuation">)</span>
	├── loading<span class="token punctuation">.</span><span class="token function">scss</span> <span class="token punctuation">(</span>loading样式<span class="token punctuation">)</span>
	├── other<span class="token punctuation">.</span><span class="token function">scss</span> <span class="token punctuation">(</span>其它样式<span class="token punctuation">)</span>
	└── waves<span class="token punctuation">.</span><span class="token function">scss</span> <span class="token punctuation">(</span>按钮波浪样式<span class="token punctuation">)</span>
</code></pre></div><h3 id="scss-部分函数说明" tabindex="-1">scss 部分函数说明 <a class="header-anchor" href="#scss-部分函数说明" aria-hidden="true">#</a></h3><p style="font-weight:bold;">一、scss @mixin</p><blockquote><p>1.1 定义：<a href="https://www.sass.hk/docs/" target="_blank" rel="noopener noreferrer">scss 官方中文文档</a>，具体请查阅官方文档。使用方法：</p></blockquote><div class="language-scss"><pre><code><span class="token comment">/* Button 按钮
------------------------------- */</span>
<span class="token keyword">@mixin</span> <span class="token function">Button</span><span class="token punctuation">(</span><span class="token variable">$main</span><span class="token punctuation">,</span> <span class="token variable">$c1</span><span class="token punctuation">,</span> <span class="token variable">$c2</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">set-color</span><span class="token punctuation">(</span><span class="token variable">$main</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token property">background</span><span class="token punctuation">:</span> <span class="token function">set-color</span><span class="token punctuation">(</span><span class="token variable">$c1</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token property">border-color</span><span class="token punctuation">:</span> <span class="token function">set-color</span><span class="token punctuation">(</span><span class="token variable">$c2</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><blockquote><p>1.2 页面中使用，先引入，然后在 <code>css</code> 类中通过 <code>@include</code> 使用</p></blockquote><div class="language-scss"><pre><code><span class="token keyword">@import</span> <span class="token string">&quot;mixins/element-mixins.scss&quot;</span><span class="token punctuation">;</span>

<span class="token comment">// default</span>
<span class="token selector">.el-button--default:hover,
.el-button--default:focus </span><span class="token punctuation">{</span>
  <span class="token keyword">@include</span> <span class="token function">Button</span><span class="token punctuation">(</span>primary<span class="token punctuation">,</span> primary-light-8<span class="token punctuation">,</span> primary-light-6<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><p style="font-weight:bold;">二、scss @function</p><blockquote><p>2.1 定义函数</p></blockquote><div class="language-scss"><pre><code><span class="token comment">/* 颜色调用函数
------------------------------- */</span>
<span class="token keyword">@function</span> <span class="token function">set-color</span><span class="token punctuation">(</span><span class="token variable">$key</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">@return</span> <span class="token function">var</span><span class="token punctuation">(</span>--color-<span class="token variable">#{$key}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><blockquote><p>2.2 不理解？请看这个 <code>css3 :root</code> <a href="https://www.runoob.com/cssref/func-var.html" target="_blank" rel="noopener noreferrer">CSS var() 函数</a></p></blockquote><div class="language-scss"><pre><code><span class="token comment">/* 定义一个名为 &quot;--main-bg-color&quot; 的属性，然后使用 var() 函数调用该属性： */</span>
<span class="token selector">:root </span><span class="token punctuation">{</span>
  <span class="token property">--main-bg-color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">#div1 </span><span class="token punctuation">{</span>
  <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--main-bg-color<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">#div2 </span><span class="token punctuation">{</span>
  <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--main-bg-color<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><p style="font-weight:bold;">三、为什么不使用这种写法放进 :root 中？</p><div class="tip custom-block"><p class="custom-block-title">原因</p><p>因为 scss 不支持这种嵌套 <code>mix(var(--color-primary), var(--color-success), 10%)</code>，lighten / darken / saturate / desaturate 等，从而无法用 <code>document.documentElement.style.setProperty(&#39;--color-primary&#39;, &#39;blue&#39;);</code> 改变样式</p></div><div class="language-scss"><pre><code><span class="token property"><span class="token variable">$colors</span></span><span class="token punctuation">:</span> <span class="token punctuation">(</span>
	<span class="token property">primary</span><span class="token punctuation">:</span> #409eff<span class="token punctuation">,</span>
	<span class="token property">success</span><span class="token punctuation">:</span> #67c23a<span class="token punctuation">,</span>
	<span class="token property">info</span><span class="token punctuation">:</span> #909399<span class="token punctuation">,</span>
	<span class="token property">warning</span><span class="token punctuation">:</span> #e6a23c<span class="token punctuation">,</span>
	<span class="token property">danger</span><span class="token punctuation">:</span> #f56c6c
<span class="token punctuation">)</span>

<span class="token selector">:root </span><span class="token punctuation">{</span>
	<span class="token keyword">@each</span> <span class="token selector"><span class="token variable">$key</span>, <span class="token variable">$value</span> in <span class="token variable">$colors</span> </span><span class="token punctuation">{</span>
		<span class="token property">--color-<span class="token variable">#{$key}</span></span><span class="token punctuation">:</span> <span class="token variable">#{$value}</span><span class="token punctuation">;</span>
	<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><h3 id="自定义全局主题" tabindex="-1">自定义全局主题 <a class="header-anchor" href="#自定义全局主题" aria-hidden="true">#</a></h3><p style="font-weight:bold;">一、实现方法，以下方法不晓得会不会影响页面渲染性能：</p><ul><li>1、定义全局 :root 初始变量，路径：<code>src/theme/common/var.scss</code></li><li>2、编写覆盖 element plus 的样式：路径：<code>src/theme/element.scss</code></li><li>3、页面通过 <code>document.documentElement.style.setProperty</code> 方法改变 <code>:root</code> 中的值</li></ul><p style="font-weight:bold;">二、具体实现</p><div class="tip custom-block"><p class="custom-block-title">提示</p><p>第 1 第 2 步就不介绍了，直接去路径去看就懂了。接下来我们讲讲第 3 步：</p></div><blockquote><p>2.1、通过 <code>document.documentElement.style.setProperty</code> 改变颜色值 <a href="https://developer.mozilla.org/zh-CN/docs/Web/API/CSSStyleDeclaration/setProperty" target="_blank" rel="noopener noreferrer">setProperty 文档</a></p></blockquote><div class="language-ts"><pre><code><span class="token comment">// setup 中</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> reactive<span class="token punctuation">,</span> toRefs <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&quot;vue&quot;</span>

<span class="token keyword">export</span> defalut <span class="token punctuation">{</span>
	<span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
		<span class="token keyword">const</span> state <span class="token operator">=</span> <span class="token function">reactive</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
			color<span class="token operator">:</span> <span class="token string">&#39;&#39;</span>
		<span class="token punctuation">}</span><span class="token punctuation">)</span>
		<span class="token keyword">function</span> <span class="token function">colorChange</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
			<span class="token comment">// 设置颜色</span>
			document<span class="token punctuation">.</span>documentElement<span class="token punctuation">.</span>style<span class="token punctuation">.</span><span class="token function">setProperty</span><span class="token punctuation">(</span>
				<span class="token string">&quot;--color-primary&quot;</span><span class="token punctuation">,</span>
				state<span class="token punctuation">.</span>color
			<span class="token punctuation">)</span>
			<span class="token comment">// 设置颜色变浅</span>
			document<span class="token punctuation">.</span>documentElement<span class="token punctuation">.</span>style<span class="token punctuation">.</span><span class="token function">setProperty</span><span class="token punctuation">(</span>
				<span class="token string">&quot;--color-primary-light-1&quot;</span><span class="token punctuation">,</span>
				<span class="token function">getLightColor</span><span class="token punctuation">(</span>state<span class="token punctuation">.</span>color1<span class="token punctuation">,</span> <span class="token number">0.1</span><span class="token punctuation">)</span>
			<span class="token punctuation">)</span>
		<span class="token punctuation">}</span>
		<span class="token keyword">return</span> <span class="token punctuation">{</span>
			colorChange<span class="token punctuation">,</span>
			<span class="token operator">...</span><span class="token function">toRefs</span><span class="token punctuation">(</span>state<span class="token punctuation">)</span>
		<span class="token punctuation">}</span>
	<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><blockquote><p>2.2、getLightColor 颜色变浅方法，路径在：<code>src/utils/theme.ts</code></p></blockquote><div class="language-ts"><pre><code><span class="token comment">// 变浅颜色值，level为加深的程度，限0-1之间</span>
<span class="token keyword">export</span> <span class="token keyword">function</span> <span class="token function">getLightColor</span><span class="token punctuation">(</span>color<span class="token operator">:</span> <span class="token builtin">any</span><span class="token punctuation">,</span> level<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">let</span> reg <span class="token operator">=</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">^\#?[0-9A-Fa-f]{6}$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">;</span>
  <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>reg<span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span>color<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token keyword">return</span> ElMessage<span class="token punctuation">.</span><span class="token function">warning</span><span class="token punctuation">(</span><span class="token string">&quot;输入错误的hex颜色值&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token keyword">let</span> rgb <span class="token operator">=</span> <span class="token function">hexToRgb</span><span class="token punctuation">(</span>color<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator">&lt;</span> <span class="token number">3</span><span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span>
    rgb<span class="token punctuation">[</span>i<span class="token punctuation">]</span> <span class="token operator">=</span> Math<span class="token punctuation">.</span><span class="token function">floor</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token number">255</span> <span class="token operator">-</span> rgb<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token operator">*</span> level <span class="token operator">+</span> rgb<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token keyword">return</span> <span class="token function">rgbToHex</span><span class="token punctuation">(</span>rgb<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">,</span> rgb<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">,</span> rgb<span class="token punctuation">[</span><span class="token number">2</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><blockquote><p>2.3、到此就完成了主题的全局变色了</p></blockquote><p>tip 还有疑问？总的来说，就是通过重新定义 <code>css</code> 样式，用来覆盖 <a href="https://element-plus.gitee.io/#/zh-CN/component/changelog" target="_blank" rel="noopener noreferrer">element-plus</a> 默认的样式，从而实现全局主题变色。其它方法实现全局主题，请自行 <a href="https://www.baidu.com/" target="_blank" rel="noopener noreferrer">百度一下：https://www.baidu.com/</a></p><h3 id="框架中实现例子" tabindex="-1">框架中实现例子 <a class="header-anchor" href="#框架中实现例子" aria-hidden="true">#</a></h3><p style="font-weight:bold;">一、全局主题改变时</p><blockquote><p>1.1、主题改变时，会调用 <code>onColorPickerChange</code> 方法进行重新的覆盖 css <code>:root</code> 定义的变量的值</p></blockquote><div class="language-ts"><pre><code><span class="token keyword">const</span> <span class="token function-variable function">onColorPickerChange</span> <span class="token operator">=</span> <span class="token punctuation">(</span>color<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  document<span class="token punctuation">.</span>documentElement<span class="token punctuation">.</span>style<span class="token punctuation">.</span><span class="token function">setProperty</span><span class="token punctuation">(</span>
    color<span class="token punctuation">,</span>
    getThemeConfig<span class="token punctuation">.</span>value<span class="token punctuation">[</span>color<span class="token punctuation">]</span>
  <span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre></div><blockquote><p>1.2、拿到的值会赋值给根节点上 <code>html</code>，<code>document.documentElement.style</code>。刷新的时再设置 <code>document.documentElement.style.cssText = Local.get(&#39;themeConfigStyle&#39;);</code>，防止数据丢失</p></blockquote><img src="https://img-blog.csdnimg.cn/c6a07541180b448a9d2fc24e2c7686f8.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAbHl0LXRvcA==,size_12,color_FFFFFF,t_70,g_se,x_16"><p style="font-weight:bold;">二、更改主题配置文件路径</p><blockquote><p><code>/@/store/modules/themeConfig.ts</code>，注意看备注：直接修改时，需要同时修改 <code>/@/theme/common/var.scss</code> 对应的值</p></blockquote><h2 id="菜单-顶栏" tabindex="-1">菜单 / 顶栏 <a class="header-anchor" href="#菜单-顶栏" aria-hidden="true">#</a></h2><h3 id="顶栏" tabindex="-1">顶栏 <a class="header-anchor" href="#顶栏" aria-hidden="true">#</a></h3><blockquote><p>文件路径：<code>/@/layout/navBars/breadcrumb</code></p></blockquote><p style="font-weight:bold;">一、顶栏背景、顶栏默认字体颜色、顶栏背景渐变</p><p>功能说明：<code>设置顶栏的背景颜色、字体颜色、背景渐变</code></p><p style="font-weight:bold;">二、效果图</p><img src="https://img-blog.csdnimg.cn/6efa9498cddb49738ea9d59114185e10.gif#pic_center"><h3 id="菜单" tabindex="-1">菜单 <a class="header-anchor" href="#菜单" aria-hidden="true">#</a></h3><blockquote><p>文件路径：<code>/@/layout/navMenu</code></p></blockquote><p style="font-weight:bold;">一、菜单背景、菜单默认字体颜色、菜单背景渐变、菜单字体背景高亮</p><p>功能说明：<code>设置菜单的背景颜色、字体颜色、背景渐变、字体高亮背景色（颜色跟随全局主题(primary)）</code></p><p style="font-weight:bold;">二、效果图</p><img src="https://img-blog.csdnimg.cn/8df792f8a8004a6d804f5d49775e21bb.gif#pic_center"><h3 id="分栏" tabindex="-1">分栏 <a class="header-anchor" href="#分栏" aria-hidden="true">#</a></h3><blockquote><p>文件路径：<code>/@/layout/component/columnsAside.vue</code></p></blockquote><p style="font-weight:bold;">一、分栏菜单背景、分栏菜单默认字体颜色、分栏菜单背景渐变</p><p>功能说明：<code>设置分栏菜单的背景颜色、字体颜色、背景渐变</code></p><p style="font-weight:bold;">二、效果图</p><img src="https://img-blog.csdnimg.cn/9dc53c3088164e5d9760eb0b08b38524.gif#pic_center"><h2 id="界面设置" tabindex="-1">界面设置 <a class="header-anchor" href="#界面设置" aria-hidden="true">#</a></h2><h3 id="菜单设置" tabindex="-1">菜单设置 <a class="header-anchor" href="#菜单设置" aria-hidden="true">#</a></h3><blockquote><p>文件路径：<code>/@/layout/navMenu</code></p></blockquote><p style="font-weight:bold;">一、菜单水平折叠、菜单手风琴、经典布局分割菜单</p><p>功能说明：<code>菜单水平折叠、手风琴（开启一个展开）、经典布局分割菜单（顶级在顶栏处，子级在菜单栏）</code></p><p style="font-weight:bold;">二、效果图</p><img src="https://img-blog.csdnimg.cn/a186682d39a54748b1efa4660a821d2d.gif#pic_center"><h3 id="固定-header" tabindex="-1">固定 Header <a class="header-anchor" href="#固定-header" aria-hidden="true">#</a></h3><blockquote><p>文件路径：<code>/@/layout/main</code></p></blockquote><p style="font-weight:bold;">一、固定 Header</p><p>功能说明：<code>固定 Header（主内容区滚动，顶栏不跟随滚动）</code></p><p style="font-weight:bold;">二、效果图</p><img src="https://img-blog.csdnimg.cn/ff1c08f33cea4a4897e1fd702de7f549.gif#pic_center"><h3 id="锁屏" tabindex="-1">锁屏 <a class="header-anchor" href="#锁屏" aria-hidden="true">#</a></h3><blockquote><p>文件路径：<code>/@/layout/lockScreen</code></p></blockquote><p style="font-weight:bold;">一、开启锁屏、自动锁屏(s/秒)</p><p>功能说明：<code>开启锁屏（类似于电脑屏保）、自动锁屏(s/秒)</code></p><p style="font-weight:bold;">二、效果图</p><img src="https://img-blog.csdnimg.cn/4e1a05bffcd44ac6b5bd71272f39fe04.gif#pic_center"><h2 id="界面显示" tabindex="-1">界面显示 <a class="header-anchor" href="#界面显示" aria-hidden="true">#</a></h2><h3 id="侧边栏-logo" tabindex="-1">侧边栏 Logo <a class="header-anchor" href="#侧边栏-logo" aria-hidden="true">#</a></h3><blockquote><p>文件路径：<code>/@/layout/logo</code></p></blockquote><p style="font-weight:bold;">一、侧边栏 Logo</p><p>功能说明：<code>显示/隐藏侧边栏 Logo</code></p><p style="font-weight:bold;">二、效果图</p><img src="https://img-blog.csdnimg.cn/33ea0e305dcc4f228a47f4bc6c39ad80.gif#pic_center"><h3 id="breadcrumb-面包屑" tabindex="-1">Breadcrumb 面包屑 <a class="header-anchor" href="#breadcrumb-面包屑" aria-hidden="true">#</a></h3><blockquote><p>文件路径：<code>/@/layout/navBars/Breadcrumb/breadcrumb.vue</code></p></blockquote><p style="font-weight:bold;">一、开启 Breadcrumb、开启 Breadcrumb 图标</p><p>功能说明：<code>开启 Breadcrumb、Breadcrumb 图标</code></p><p style="font-weight:bold;">二、效果图</p><img src="https://img-blog.csdnimg.cn/67df8ad8c6e641de94545aad586add9c.gif#pic_center"><h3 id="tagsview-标签页" tabindex="-1">Tagsview 标签页 <a class="header-anchor" href="#tagsview-标签页" aria-hidden="true">#</a></h3><blockquote><p>文件路径：<code>/@/layout/navBars/tagsView</code></p></blockquote><p style="font-weight:bold;">一、开启 Tagsview、开启 Tagsview 图标、开启 TagsView 缓存、开启 TagsView 拖拽、开启 TagsView 共用</p><p>功能说明：<code>开启 Tagsview、Tagsview 图标、TagsView 缓存、TagsView 拖拽、TagsView 共用（共用详情界面：tagsView只会出现一个；非共用详情界面：tagsView会出现多个）</code></p><p style="font-weight:bold;">二、效果图</p><img src="https://img-blog.csdnimg.cn/d760ab8798ac428593760226e870879f.gif#pic_center"><h3 id="footer-版权" tabindex="-1">Footer 版权 <a class="header-anchor" href="#footer-版权" aria-hidden="true">#</a></h3><blockquote><p>文件路径：<code>/@/layout/footer</code></p></blockquote><p style="font-weight:bold;">一、开启 Footer 版权</p><p>功能说明：<code>显示/隐藏底部版权</code></p><p style="font-weight:bold;">二、效果图</p><img src="https://img-blog.csdnimg.cn/c1ca33ebf6e64ad3baba268235f348f3.gif#pic_center"><h3 id="颜色模式" tabindex="-1">颜色模式 <a class="header-anchor" href="#颜色模式" aria-hidden="true">#</a></h3><blockquote><p>文件路径：<code>/@/layout/navBars/breadcrumb/setings.vue</code></p></blockquote><p style="font-weight:bold;">一、灰色模式、色弱模式、深色模式</p><p>功能说明：<code>开启灰色模式、色弱模式、深色模式</code></p><p style="font-weight:bold;">二、效果图</p><img src="https://img-blog.csdnimg.cn/856f60ae98074f4e8c57c3fad16a8d94.gif#pic_center"><h3 id="水印" tabindex="-1">水印 <a class="header-anchor" href="#水印" aria-hidden="true">#</a></h3><blockquote><p>文件路径：<code>/@/utils/wartermark.ts</code></p></blockquote><p style="font-weight:bold;">一、开启水印、水印文案</p><p>功能说明：<code>开启开启水印、设置水印文案</code></p><p style="font-weight:bold;">二、效果图</p><img src="https://img-blog.csdnimg.cn/19e0ced20c2d495599b69f09227f690b.gif#pic_center"><h2 id="其它设置" tabindex="-1">其它设置 <a class="header-anchor" href="#其它设置" aria-hidden="true">#</a></h2><div class="tip custom-block"><p class="custom-block-title">定位查看 css 样式</p><p>可使用 el-option 的 <code>value</code> 值去对应的 <code>文件路径</code> 里搜索查看</p></div><h3 id="tagsview-风格" tabindex="-1">Tagsview 风格 <a class="header-anchor" href="#tagsview-风格" aria-hidden="true">#</a></h3><blockquote><p>文件路径：<code>/@/layout/navBars/tagsView</code>。需注意 <code>value</code> 值需与定义的 <code>css 类名</code> 一致</p></blockquote><div class="language-html"><pre><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-select</span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>getThemeConfig.tagsStyle<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-option</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>风格1<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>tags-style-one<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-option</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-option</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>风格2<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>tags-style-two<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-option</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-option</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>风格3<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>tags-style-three<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-option</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-option</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>风格4<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>tags-style-four<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-option</span><span class="token punctuation">&gt;</span></span>
  <span class="token comment">&lt;!-- 新增的风格 --&gt;</span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-option</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>风格xx<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>tags-style-xxx<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-option</span><span class="token punctuation">&gt;</span></span>
  <span class="token comment">&lt;!-- 继续添加 --&gt;</span>
  ...
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-select</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><h3 id="主页面切换动画" tabindex="-1">主页面切换动画 <a class="header-anchor" href="#主页面切换动画" aria-hidden="true">#</a></h3><blockquote><p>文件路径：<code>/@/theme/common/transition.scss</code>，内置 <code>slide-right</code>、<code>slide-left</code>、<code>opacitys</code> 切换风格。你可能需要了解 <a href="https://v3.cn.vuejs.org/guide/transitions-enterleave.html" target="_blank" rel="noopener noreferrer">进入过渡 &amp; 离开过渡</a>。新增动画时，需要在 <code>/@/layout/navBars/breadcrumb/setings.vue</code> 其它设置中添加如下：</p></blockquote><div class="language-html"><pre><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-select</span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>getThemeConfig.animation<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-option</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>slide-right<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>slide-right<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-option</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-option</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>slide-left<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>slide-left<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-option</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-option</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>opacitys<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>opacitys<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-option</span><span class="token punctuation">&gt;</span></span>
  <span class="token comment">&lt;!-- 新增的动画名 --&gt;</span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-option</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>xxx<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>xxx<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-option</span><span class="token punctuation">&gt;</span></span>
  <span class="token comment">&lt;!-- 继续添加 --&gt;</span>
  ...
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-select</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><h3 id="分栏高亮风格" tabindex="-1">分栏高亮风格 <a class="header-anchor" href="#分栏高亮风格" aria-hidden="true">#</a></h3><blockquote><p>文件路径：<code>/@/layout/component/columnsAside.vue</code>。需注意 <code>value</code> 值需与定义的 <code>css 类名</code> 一致</p></blockquote><div class="language-html"><pre><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-select</span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>getThemeConfig.columnsAsideStyle<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-option</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>圆角<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>columns-round<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-option</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-option</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>卡片<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>columns-card<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-option</span><span class="token punctuation">&gt;</span></span>
  <span class="token comment">&lt;!-- 新增的高亮风格 --&gt;</span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-option</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>xxx<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>xxx<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-option</span><span class="token punctuation">&gt;</span></span>
  <span class="token comment">&lt;!-- 继续添加 --&gt;</span>
  ...
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-select</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><h3 id="分栏布局风格" tabindex="-1">分栏布局风格 <a class="header-anchor" href="#分栏布局风格" aria-hidden="true">#</a></h3><blockquote><p>文件路径：<code>/@/layout/component/columnsAside.vue</code>。需注意 <code>value</code> 值需与定义的 <code>css 类名</code> 一致</p></blockquote><div class="language-html"><pre><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-select</span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>getThemeConfig.columnsAsideLayout<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-option</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>水平<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>columns-horizontal<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-option</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-option</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>垂直<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>columns-vertical<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-option</span><span class="token punctuation">&gt;</span></span>
  <span class="token comment">&lt;!-- 新增的分栏布局风格 --&gt;</span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-option</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>xxx<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>xxx<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-option</span><span class="token punctuation">&gt;</span></span>
  <span class="token comment">&lt;!-- 继续添加 --&gt;</span>
  ...
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-select</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><h2 id="布局切换" tabindex="-1">布局切换 <a class="header-anchor" href="#布局切换" aria-hidden="true">#</a></h2><blockquote><p>此项目包含四个布局：默认、经典、横向、分栏。查看大图，鼠标右键：<code>在新标签页中打开图片</code></p></blockquote><img src="https://gitee.com/lyt-top/vue-next-admin-images/raw/master/docs/defaults.png" width="50%" style="border:1px solid var(--c-brand);"><img src="https://gitee.com/lyt-top/vue-next-admin-images/raw/master/docs/classic.png" width="50%" style="border:1px solid var(--c-brand);"><img src="https://gitee.com/lyt-top/vue-next-admin-images/raw/master/docs/transverse.png" width="50%" style="border:1px solid var(--c-brand);"><img src="https://gitee.com/lyt-top/vue-next-admin-images/raw/master/docs/columns.png" width="50%" style="border:1px solid var(--c-brand);"></div></div><footer class="page-footer" data-v-1c2e469b data-v-0673e034><div class="edit" data-v-0673e034><div class="edit-link" data-v-0673e034 data-v-8a069728><a class="link" href="https://gitee.com/lyt-top/vue-next-admin-doc/edit/master/config/layoutConfig/index.md" target="_blank" rel="noopener noreferrer" data-v-8a069728>欢迎到 Gitee 上编辑此页！ <svg class="icon outbound icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-8a069728><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div></div><div class="updated" data-v-0673e034><p class="last-updated" data-v-0673e034 data-v-90112f00><span class="prefix" data-v-90112f00>上次更新:</span><span class="datetime" data-v-90112f00></span></p></div></footer><div class="next-and-prev-link" data-v-1c2e469b data-v-7587c728><div class="container" data-v-7587c728><div class="prev" data-v-7587c728><a class="link" href="/vue-next-admin-doc-preview/config/menu/" data-v-7587c728><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="icon icon-prev" data-v-7587c728><path d="M19,11H7.4l5.3-5.3c0.4-0.4,0.4-1,0-1.4s-1-0.4-1.4,0l-7,7c-0.1,0.1-0.2,0.2-0.2,0.3c-0.1,0.2-0.1,0.5,0,0.8c0.1,0.1,0.1,0.2,0.2,0.3l7,7c0.2,0.2,0.5,0.3,0.7,0.3s0.5-0.1,0.7-0.3c0.4-0.4,0.4-1,0-1.4L7.4,13H19c0.6,0,1-0.4,1-1S19.6,11,19,11z"></path></svg><span class="text" data-v-7587c728>菜单配置</span></a></div><div class="next" data-v-7587c728><a class="link" href="/vue-next-admin-doc-preview/config/iconfont/" data-v-7587c728><span class="text" data-v-7587c728>字体图标</span><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="icon icon-next" data-v-7587c728><path d="M19.9,12.4c0.1-0.2,0.1-0.5,0-0.8c-0.1-0.1-0.1-0.2-0.2-0.3l-7-7c-0.4-0.4-1-0.4-1.4,0s-0.4,1,0,1.4l5.3,5.3H5c-0.6,0-1,0.4-1,1s0.4,1,1,1h11.6l-5.3,5.3c-0.4,0.4-0.4,1,0,1.4c0.2,0.2,0.5,0.3,0.7,0.3s0.5-0.1,0.7-0.3l7-7C19.8,12.6,19.9,12.5,19.9,12.4z"></path></svg></a></div></div></div><!--[--><!--]--></div></main></div><!----><!--]--></div>
    <script>__VP_HASH_MAP__ = JSON.parse("{\"config_build_index.md\":\"cf908e9c\",\"config_builtplug_index.md\":\"6fbdc8f3\",\"config_charts_index.md\":\"6b253f7e\",\"config_directive_index.md\":\"eca8fc0a\",\"config_i18n_index.md\":\"52f920f7\",\"config_iconfont_index.md\":\"873ceaa3\",\"config_index.md\":\"17f09bd6\",\"config_layoutconfig_index.md\":\"713fd6e3\",\"config_menu_index.md\":\"ba743976\",\"config_otherissues_index.md\":\"bd715eeb\",\"config_partyplug_index.md\":\"99e0e69a\",\"config_power_index.md\":\"9b5ee6e9\",\"config_route_index.md\":\"0855307d\",\"config_server_index.md\":\"895abd2b\",\"config_support_index.md\":\"ba13e927\",\"config_tagsview_index.md\":\"7f3b9bdb\",\"config_tool_index.md\":\"b5e28201\",\"config_vuex_index.md\":\"0fa37ee1\",\"home_compatible_index.md\":\"7fe73f8e\",\"home_doc_index.md\":\"d5c819dd\",\"home_eslint_index.md\":\"de668d54\",\"home_fast_index.md\":\"716712dd\",\"home_forpeople_index.md\":\"8510cbe7\",\"home_gitpush_index.md\":\"d077e28a\",\"home_index.md\":\"1ee95fc1\",\"home_install_index.md\":\"41dfc4c6\",\"home_introduce_index.md\":\"4950d882\",\"home_prettier_index.md\":\"c5b741b5\",\"home_thank_index.md\":\"b63e2205\",\"home_vscode_index.md\":\"fc526584\",\"index.md\":\"56b80810\"}")</script>
    <script type="module" async src="/vue-next-admin-doc-preview/assets/app.9cc95a61.js"></script>
    
  </body>
</html>